<template>
  <input v-if="modelValue || Number(modelValue) == 0" ref="inputRef" type="text" class="my-input" />
</template>

<script lang="ts" setup>
import { useCurrencyInput } from 'vue-currency-input'

const props: any = defineProps({
  modelValue: { type: Number, default: 0 },
  options: {
    type: Object,
    default: {
      currency: 'CNY',
      currencyDisplay: 'narrowSymbol',
      precision: 2,
      hideCurrencySymbolOnFocus: false,
      hideGroupingSeparatorOnFocus: false,
      hideNegligibleDecimalDigitsOnFocus: false,
      useGrouping: true,
    },
  },
})

const { inputRef } = useCurrencyInput(props.options)
</script>

<style scoped>
.my-input {
  cursor: text;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  width: 100%;
  height: 38px;
  color: #606266;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.my-input:hover {
  box-shadow: 0 0 0 1px var(--el-text-color-disabled) inset;
}
.my-input:focus {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}
</style>
